<!-- 台区 -->
<template>
  <div>
    <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false"
               :destroy-on-close="true" v-dialogDrag append-to-body>

      <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm" :size="size">
        <el-row :gutter="16" justify="start">
          <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-radio-group v-model="radio1" @change="clickRadio" style="margin-bottom:10px">
                  <el-radio-button label="0">选择设备</el-radio-button>

              </el-radio-group>
          </el-col> -->
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="单位名称:" prop="unitNo">
              <el-select v-model="ruleForm.unitNo" placeholder="请选择" clearable style="width: 100%" disabled
                         @change="handler1"
              >
                <el-option v-for="item in  OptionData.OptionData_deptNo" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="工单名称:" prop="taskName">
              <el-input v-model="ruleForm.taskName" clearable placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="缺陷隐患名称:" prop="defectName">
              <el-input v-model="ruleForm.defectName" clearable placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="发现班组:" prop="teamName">
                  <el-input v-model="ruleForm.teamName" clearable placeholder=""></el-input>
              </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="数据来源:" prop="taskSourceNo">
              <el-select v-model="ruleForm.taskSourceNo" placeholder="请选择" clearable style="width: 100%"
                         @change="handler1"
              >
                <el-option v-for="item in OptionData.OptionData_sjlyOptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="发现日期:" prop="creatTime">
              <el-date-picker v-model="ruleForm.creatTime" type="datetime" style="width:100%" clearable
                              placeholder="请选择" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="问题分类:" prop="equipDefectType">
              <el-select v-model="ruleForm.equipDefectType" placeholder="请选择" clearable style="width: 100%"
                         @change="handler1"
              >
                <el-option v-for="item in   OptionData.OptionData_djztOptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="6"> -->
          <el-form-item style="float:right">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button style="margin-left: 10px" @click="handleReset">重置</el-button>
          </el-form-item>
          <!-- </el-col> -->
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="24" style="color:#000000">
          <div style="height:2px;background:#009688;margin-bottom: 5px;"></div>
          <!-- === <vxe-table border stripe height="500" :data="list1.data" @checkbox-all="selectAllEvent"
               @checkbox-change="selectChangeEvent" ref="xTable" :loading="loading">===  -->
          <vxe-table border stripe ref="table1" height="400" :column-config="{ resizable: true }" :size="size"
                     :row-config="{ isHover: true }" @radio-change="radioChangeEvent"
                     :radio-config="{ checkMethod: checkRadioMethod, highlight: true }"
                     :checkbox-config="{ highlight: true }"
                     :data="list1.data" :loading="loading">
            <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
            <vxe-column v-if="!isDisabled" type="checkbox" width="60" align="center"></vxe-column>
            <vxe-column field="unitName" align="center" title="单位名称" minWidth="200"></vxe-column>
            <vxe-column field="defectName" title="缺陷隐患名称" align="center" minWidth="150">
              <template v-slot="{ row }">
                <span style="color:#0000FF;cursor: pointer; " @click="handleBaseInfo(row)">{{ row.defectName }}</span>
              </template>
            </vxe-column>
            <vxe-column field="taskName" title="工单名称" align="center" minWidth="150"></vxe-column>
            <vxe-column field="equipName" title="设备名称" align="center" minWidth="150"></vxe-column>
            <vxe-column field="defectDescription" title="详细描述" align="center" minWidth="150"></vxe-column>
            <vxe-column field="jfName" title="能源站名称" align="center" minWidth="150"></vxe-column>
            <vxe-column field="kfName" title="库房名称" align="center" minWidth="150"></vxe-column>

            <vxe-column field="equipDefectTypeName" title="问题分类" align="center" minWidth="150">
              <template v-slot="{ row }">
                <span>{{ row.equipDefectType == '1' ? '缺陷' : '隐患' }}</span>
              </template>
            </vxe-column>
            <vxe-column field="creator" title="发现人" align="center" minWidth="150"></vxe-column>
            <!-- <vxe-column field="teamName" title="发现班组" align="center" minWidth="150"></vxe-column> -->
            <vxe-column field="creatTime" title="发现日期" align="center" minWidth="150"></vxe-column>
            <!-- <vxe-column field="defectParts" title="缺陷隐患部位" align="center" minWidth="150"></vxe-column>
            <vxe-column field="defectAddress" title="缺陷隐患地址" align="center" minWidth="150"></vxe-column>


            <vxe-column field="equipTypeName" title="设备类型" align="center" minWidth="150"></vxe-column>
            <vxe-column field="taskName" title="任务名称" align="center" minWidth="150"></vxe-column> -->
            <!-- === <vxe-column field="projectName" title="拆除时间" align="center" minWidth="150"></vxe-column> === -->

          </vxe-table>
          <vxe-pager perfect size="mini" :current-page="list1.pageNo" :page-size="list1.pageSize"
                     :page-sizes="list1.pageSizes" :total="list1.total"
                     :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                     @page-change="handlePageChange1">
          </vxe-pager>
        </el-col>

      </el-row>
      <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancel()" :size="size" icon="fa fa-minus-square-o">取消</el-button>
                <el-button type="primary" @click="handleSubmit()" :size="size"
                           icon="fa fa-save (alias)">确定</el-button>
            </span>
    </el-dialog>
    <baseInfo ref="baseInfo"></baseInfo>
  </div>
</template>
<script>
import {defectTaskApi} from '@/api/defects/defectTaskApi.js'
import baseInfo from "./baseInfo.vue"
import {CommonApi} from '@/api/equip/CommonApi'
import {getInfo} from "@/api/login";
import {listDept} from "@/api/system/dept";

export default {
  components: {baseInfo},
  data() {
    return {
      isDisabled: true,
      OptionData: {
        OptionData_deptNo: [{label: '', value: ''}, {label: '', value: ''}],
        OptionData_djztOptions: [],
        OptionData_sjlyOptions: []
      },
      selectRow: null,
      selectRow1: null,
      size: "medium",
      ruleForm: {
        taskName: '',//工单内容
        unitName: '',//单位编码
        unitNo: "",//单位编码
        // defectStatusCode:"",//状态
        gdmcc: '', //工单名称
        defectName: '', //缺陷隐患名称
        teamName: '',//发现班组
        jfName: '',//机房名称
        jfNo: "",
        kfNo: "",
        kfName: '',//库房名称
        creatTime: '',//库房名称
        taskSourceNo: '',
        equipDefectType: '',//隐患类型编码
        equipDefectTypeName: ""
      },
      radio1: '0',
      dialogProps: {
        visible: false,
        title: "选择",
        width: "80%",
        top: "10px",
      },

      overheadLine: false,

      list1: {
        data: [],
        pageNo: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        total: 0
      },
      list2: {
        data: [],
        pageNo: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        total: 0
      },
      loading: false,
      formData: {}
    };
  },
  methods: {
    showDialog(data, formData) {
      console.log(formData)
      for (let key in formData) {
        this.ruleForm[key] = formData[key];
      }
      this.ruleForm.unitNo = formData.xqdwbm
      this.ruleForm.unitName = formData.xqdwmc
      this.ruleForm.jfName = formData.ssjfmc
      this.ruleForm.jfNo = formData.ssjf
      this.ruleForm.kfName = formData.sskfmc
      this.ruleForm.kfNo = formData.sskf
      this.getOptionData_deptNo()
      this.fetchdjztOptions() //问题分类
      this.fetchsjlyOptions()
      this.dialogProps.visible = true
      this.list2.data = data
      this.list2.total = data.length
      this.handleSearch()
    },
    changeHandler(value) {
      console.log(value)
      this.ruleForm.equipDefectTypeName = '';
      if (value) {
        let arr = this.OptionData.OptionData_djztOptions.filter(item => {
          return item.value == value;
        })
        if (arr && arr.length > 0) {
          this.ruleForm.equipDefectTypeName = arr[0].label;

        }

      }
    },
    handler1(value) {
      console.log(value)
      this.ruleForm.unitName = '';
      if (value) {
        let arr = this.OptionData.OptionData_deptNo.filter(item => {
          return item.value == value;
        })

        if (arr && arr.length > 0) {
          this.ruleForm.unitName = arr[0].label;

        }

      }
    },

    getOptionData_deptNo() {//获取任务类型：字典表
      getInfo().then(res => {
        let params = {
          deptId: res.user.dept.deptId,
          parentId: res.user.dept.parentId
        }
        listDept(params).then(result => {
          this.dwinfo = result.data
          let optionList = [
            {label: '请选择', value: ''}
          ]
          result.data.forEach((item) => {
            optionList.push({label: item.deptName, value: item.deptId})

          })
          this.OptionData.OptionData_deptNo = optionList;
        })

      })

    },

    fetchdjztOptions() {
      CommonApi.queryDictData('EN_DEFECTS_TYPE').then(res => {
        // if (res.code === '200') {
        let optionList = [
          {label: '请选择', value: ''}
        ]
        res.data.forEach((item) => {
          optionList.push({label: item.value, value: item.code})
        })
        this.OptionData.OptionData_djztOptions = optionList
        console.log(this.djztOptions)
      })
    },
    // EN_DEFECTS_RESOUCE
    fetchsjlyOptions() {
      CommonApi.queryDictData('EN_DEFECTS_RESOUCE').then(res => {
        // if (res.code === '200') {
        let optionList = [
          {label: '请选择', value: ''}
        ]
        res.data.forEach((item) => {
          optionList.push({label: item.value, value: item.code})
        })
        this.OptionData.OptionData_sjlyOptions = optionList
      })
    },
    //查询
    handleSearch() {
      console.log(this.ruleForm, "111")
      const pageParams = {
        pageSize: this.list1.pageSize ? this.list1.pageSize : 10,
        pageNo: this.list1.pageNo,
        entity: {
          unitName: this.ruleForm.unitName,//单位编码
          unitNo: this.ruleForm.unitNo,//单位编码
          // defectStatusCode:"2",//状态
          taskName: this.ruleForm.taskName, //工单名称
          defectName: this.ruleForm.defectName, //缺陷隐患名称
          teamName: this.ruleForm.teamName,//发现班组
          // jfName:this.ruleForm.jfName,//机房名称
          // kfName:this.ruleForm.kfName,//库房名称
          creatTime: this.ruleForm.creatTime,//库房名称
          taskSourceNo: this.ruleForm.taskSourceNo,
          equipDefectType: this.ruleForm.equipDefectType,//隐患类型编码
          equipDefectTypeName: this.ruleForm.equipDefectTypeName,
          jfName: this.ruleForm.jfName,
          jfNo: this.ruleForm.jfNo,
          kfNo: this.ruleForm.kfNo,
          kfName: this.ruleForm.kfName
        },
        paramsMap: {},
        column: '',
        order: ''
      };
      defectTaskApi.getSelectDefect(pageParams).then(res => {
        this.loading = false
        this.list1.data = []
        this.list1 = {
          data: res.data.records,
          pageNo: res.data.current,
          pageSize: res.data.pageSize,
          pageSizes: [10, 20, 50, 100],
          total: res.data.total
        }
      })
    },
    handleBaseInfo(row) {
      this.$refs.baseInfo.showDialog(false, row, true)
      // console.log(this.$refs.baseInfo)
    },
    //重置
    handleReset() {
      // this.ruleForm = {
      //     // defectStatusCode:"2",//状态
      // }
      this.ruleForm.equipDefectType = ''
      this.ruleForm.creatTime = ''
      this.ruleForm.taskSourceNo = ''
      this.ruleForm.defectName = ''
      this.ruleForm.taskName = ''
      const pageParams = {
        pageSize: 10,
        pageNo: 1,
        entity: {
          unitNo: this.ruleForm.unitNo,
          jfNo: this.ruleForm.jfNo,
          kfNo: this.ruleForm.kfNo
        },
        paramsMap: {},
        column: '',
        order: ''
      };
      defectTaskApi.getSelectDefect(pageParams).then(res => {
        this.list1.data = []
        this.list1 = {
          data: res.data.records,
          pageNo: res.data.current,
          pageSize: res.data.pageSize,
          pageSizes: [10, 20, 50, 100],
          total: res.data.total
        }
      })
    },
    //分页查询
    handlePageChange1({currentPage, pageSize}) {
      this.loading = true
      this.list1.pageNo = currentPage;
      this.list1.pageSize = pageSize;
      this.handleSearch()
    },
    handlePageChange2({currentPage, pageSize}) {
      this.loading = true
      this.list2.pageNo = currentPage;
      this.list2.pageSize = pageSize;
      this.handleSearch()
    },

    radioChangeEvent({row}) {
      //选中行切换
      this.selectRow = row;
      this.selectRow1 = row;
    },
    //删除已选
    handleDelete() {
      const rowArr = this.$refs.table2.getCheckboxRecords(true);
      this.list2.data = this.list2.data.filter(
        (d) => rowArr.findIndex((b) => b.sbbm === d.sbbm) < 0
      );
      this.list1.total = this.list1.total + rowArr.length
      rowArr.forEach((d) => {
        if (!this.list2.data.find((b) => b.sbbm === d.sbbm)) {
          this.list1.data.unshift(d);
          this.list2.total -= 1
        }
      });
    },
    //清空已选
    handleClear() {
      this.list2.data = [];
      this.list2.total = 0
      this.handleSearch()
    },
    checkRadioMethod({row}) {
      console.log(row, 'ppppp');
      //设置能够被选中的记录
      return
    },
    //确定
    handleSubmit() {
      const rowArr = this.$refs.table1.getCheckboxRecords(true)
      rowArr.forEach(d => {
        // if (!this.list2.data.find(b => b.sbbm === d.sbbm)) {
        this.list2.data.push(d)
        // this.list1.total = this.list1.total - 1
        this.list2.total = this.list2.data.length
        // }
      })
      // this.list1.data = this.list1.data.filter(d => rowArr.findIndex(b => b.sbbm === d.sbbm) < 0)
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.list2.data)
          this.$emit("onSelectStations", this.list2.data);
          this.dialogProps.visible = false;
        } else {
          return false;
        }
      });

    },
    //取消
    handleCancel() {
      this.$refs.ruleForm.resetFields()
      this.dialogProps.visible = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.handleCancel()
          this.dialogProps.visible = false;
        })
        .catch((_) => {
        });
    },
  },
};
</script>
<style>
.el-dialog__footer {
  width: 100%;
  border-top: 1px solid #e8e8e8;
}
</style>
